import React, { Component } from "react"
import { observer, inject } from "mobx-react"
import { Link, withRouter } from "react-router-dom"
import cssModules from "react-css-modules"
import { message, Checkbox } from "antd"
import RectifierModule from "./components/RectifierModule"
import More from "../More"
import SceneModal from "../ScreenModal"
import ModalContent from "./components/ModalContent/index.js"

import styles from "./index.less"

@inject("ScreenStore")
@observer
@cssModules(styles)
class Overview extends Component {
  constructor(props) {
    super(props)

    this.store = this.props.ScreenStore
  }
  state = {}
  handleClick = () => {
    const { confim } = this.store
    confim("module")
  }

  componentWillMount() {
    const { getRectifierModule } = this.store
    getRectifierModule()
  }
  render() {
    const { rectifierModule } = this.store
    const data = (rectifierModule && rectifierModule.rectifierModules) || []

    let xAxisData = []
    let seriesData = []
    data
      .filter((item) => {
        return item.show
      })
      .forEach((item, i) => {
        xAxisData.push(
          item.spName ? `${item.spName}: ${item.value} ${item.unit || ""}` : "-"
        )
        seriesData.push(item.value ? item.value : "-")
      })

    return (
      <div styleName="module-container">
        <div styleName={"title-container"}>
          <div styleName={"title-selected"} />
          <div styleName={"title"}>整流模块</div>
        </div>
        <div styleName={"chart-container"}>
          <RectifierModule xAxisData={xAxisData} seriesData={seriesData} />
        </div>
        <More handleClick={this.handleClick} />
        <SceneModal type={"module"} title={"整流模块"}>
          <ModalContent data={data} type={"module"} />
        </SceneModal>
      </div>
    )
  }
}

export default Overview
